<!DOCTYPE html>
<html>
<head>
    <title>Chat Application</title>
</head>
<body>
<input type="text" id="message" />
<button onclick="sendMessage()">Send</button>

<ul id="chat"></ul>

<script>
    const socket = new SockJS('/chat');
    const stompClient = Stomp.over(socket);

    stompClient.connect({}, function(frame) {
        stompClient.subscribe('/topic/public', function(response) {
            showMessage(JSON.parse(response.body));
        });
    });

    function sendMessage() {
        const messageContent = document.getElementById('message').value;
        const message = { sender: 'user', content: messageContent };
        stompClient.send('/app/chat.sendMessage', {}, JSON.stringify(message));
    }

    function showMessage(message) {
        const chat = document.getElementById('chat');
        const messageElement = document.createElement('li');
        messageElement.appendChild(document.createTextNode(`${message.sender}: ${message.content}`));
        chat.appendChild(messageElement);
    }
</script>
</body>
</html>
